<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css">
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body {
            background: rgba(90, 194, 255, 1);
        }

        .vueApp {
            padding-bottom: 10px;
        }

        .bg {
            position: relative;
            height: 224px;
            background-image: url("../../image/ui/bg_2.png");
            background-size: 100% 100%;
            overflow: hidden;
        }

        .lev1 {
            font-size: 12px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            margin-top: 36px;
            margin-left: 45px;
        }

        .lev2 {
            font-size: 30px;
            font-weight: 400;
            color: rgba(214, 77, 0, 1);
            margin-top: 8px;
            margin-left: 45px;
        }

        .lev3 {
            position: absolute;
            bottom: 55px;
            width: 100%;
        }

        .lev3-text {
            font-size: 15px;
            font-weight: 500;
            color: rgba(124, 69, 0, 1);
        }

        .lev3-arrow {
            width: 10px;
            height: 10px;
            margin-left: 11px;
            margin-right: 56px;
        }

        .btn {
            width: 210px;
            height: 46px;
            margin: 20px auto 0 auto;
            background: url("../../image/ui/btn.png");
            background-size: 100% 100%;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: rgba(124, 69, 0, 1);
            line-height: 44px;
            box-shadow: 0px 5px 7px 0px rgba(11, 126, 193, 0.53);
            border-radius: 24px;
        }

        .btn-2 {
            width: 210px;
            height: 46px;
            margin: 20px auto 0 auto;
            background: url("../../image/ui/btn_2.png");
            background-size: 100% 100%;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: rgba(124, 69, 0, 1);
            line-height: 44px;
            box-shadow: 0px 5px 7px 0px rgba(11, 126, 193, 0.53);
            border-radius: 22px;
        }

        .btn-3 {
            position: relative;
            overflow: visible;
            margin: 25px auto 0 auto;
            width: fit-content;
            font-size: 13px;
            font-weight: 600;
            color: rgba(255, 255, 255, 1);
        }

        .btn-3 .arrow {
            position: absolute;
            right: -17px;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 10px;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="bg">
            <div class="lev1">我的余额</div>
            <div class="lev2">¥{{ money }}</div>
            <div class="lev3" data-flex="main:right cross:center" @click="detail()">
                <div class="lev3-text">查看明细</div>
                <div class="lev3-arrow">
                    <img src="../../image/ui/arrow_right_4.png" alt="">
                </div>
            </div>
        </div>
        <!-- <div class="btn" @click="recharge()">
            充值
        </div> -->
        <div class="btn-2" @click="cashOut()">
            提现
        </div>
        <div class="btn-3" data-flex="main:center cross:center" @click="cashOutHistory()">
            提现记录
            <div class="arrow">
                <img src="../../image/ui/arrow_right_5.png" alt="">
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        fnInit();
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                money: ''
            }
        });
        getPageData();
    }

    function getPageData() {
        var params = {};
        var url = 'apiTbAppUser/findUserBasic';
        var callback = function (data) {
            vm.money = data.blance || 0;
        };
        POST(url, params, callback);
    }

    function headerFn() {
        fnOpenPublicWin('管理提现账户', 'teacher/pamm');
    }

    // 查看明细
    function detail() {
        fnOpenPublicWin('收益明细', 'teacher/income_detail');
    }

    // 充值
    function recharge() {
        fnOpenPublicWin('充值余额', 'teacher/recharge');
    }

    // 提现
    function cashOut() {
        if(vm.money > 0) {
            fnOpenPublicWin('提现', 'teacher/cashout', {
                winName: api.winName,
                frmName: api.frameName,
                money: vm.money
            });
        } else {
            fnToast('您的余额为0无法提现');
        }
    }

    // 提现记录
    function cashOutHistory() {
        fnOpenPublicWin('提现记录', 'teacher/cashout_history');
    }

    // 支付成功后的回调
    function paySuccessCallback(money) {
        vm.money += money;
    }
</script>

</html>